<template>
    <div class="search-box">
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="router.back()" />
        <van-search v-model="svalue" @focus="() => show = true" @search="seEvt" placeholder="请输入搜索关键词"
            input-align="center" />
        <div class="tj" v-show="show">
            <span class="h">热门推荐</span>
            <div class="t">
                <span v-for="it in hotTj" :key="it" @click="test(it)">{{ it }}</span>
            </div>
        </div>
        <div class="til">猜你喜欢</div>
        <div class="contente">
            <div class="item" v-for="it in listArr" :key="it.id"  @click="detaEvt(it.id)">
                <img :src="it.img" alt="图片">
                <span>{{ it.title }}</span>
            </div>
            <div style="margin-bottom: 30px; width: 100%; text-align: center;">
                <p>到底了！</p>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { getByTypeApi, getProById, getSearDeseApi } from "../../apis/homeApi";
const router = useRouter()

let svalue = ref('')
svalue.value = sessionStorage.getItem('searchValue') || ''
// 热门推荐词
const hotTj = ref(['女装', '包包', '鞋', '泳装', '手表'])
let listArr = ref([])
const show = ref(false)
if(svalue.value){
    searchEvt(svalue.value)
}else{
    let _xh = ['性感','纯欲','泳装','表','鞋','女','男'][Math.round(Math.random()*6)]
    searchEvt(_xh)
}
function test(it: string) {
    svalue.value = it
    seEvt()
}

function seEvt() {
    show.value = false
    searchEvt(svalue.value)
}
async function searchEvt(des: string) {
    let _res = await getSearDeseApi(des)
    listArr.value = _res.data

}

/** 跳转详情页 */
async function detaEvt(id:string){
  let res = await getProById(id)
  sessionStorage.setItem('goodsId',res.data.id)
  router.push('/details')
}

// getStyleList('泳装')
// async function getStyleList(type: string) {
//     let _res = await getByTypeApi(type)
//     listArr.value = _res.data
// }
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.search-box {
    position: relative;
    height: 100%;
    overflow: hidden;
    background-color: @g2;

    .tj {
        .h {
            font-size: 16px;
            padding-left: 20px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 10px;
                top: 0;
                width: 4px;
                height: 18px;
                background-color: #030303;
            }
        }

        .t {
            padding: 8px 10px;

            span {
                display: inline-block;
                padding: 4px 10px;
                font-size: .6rem;
                background-color: @g3;
                margin: 0 5px;
                border-radius: 10px;
            }
        }
    }

    .til {
        text-indent: 1rem;
        line-height: 32px;
        font-size: 16px;
    }

    .contente {
        overflow-x: hidden;
        height: calc(100% - 100px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: @g2;

        .item {
            width: 50%;
            margin-bottom: 10px;

            img {
                width: 100%;
                height: 260px;
                padding: 10px;
            }

            span {
                font-size: 12px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 12px;
            }
        }
    }

}</style>